<script setup lang="ts">
import { ref, reactive, onMounted, watch, onUpdated } from "vue";
import { graphic } from "echarts/core";
import { ranking } from "@/api";
import { ElMessage } from "element-plus";

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

const areaName = ref([]);
const xArr1 = ref([]);
const xArr2 = ref([]);
const xArr3 = ref([]);

const option = ref({});
// const getData = () => {
//   ranking({ type: props.type })
//     .then((res) => {
//       if (res.success) {
//         areaName.value = res.data.map((item) => item.name);
//         xArr.value = res.data.map((item) => item.value);
//         setOption();
//       } else {
//         ElMessage.error(res.msg);
//       }
//     })
//     .catch((err) => {
//       ElMessage.error(err);
//     });
// };

onMounted(() => {
  setOption(props.data);
})

watch(
  () => props.data,
  (value) => {
    setOption(value);
  }
)

const setOption = (value) => {

  areaName.value = value.map((item) => item.name);
  xArr1.value = value.map((item) => item.value);
  xArr2.value = value.map((item) => item.value);
  xArr3.value = value.map((item) => item.value);

  option.value = {
    grid: {
      left: "12",
      top: "36",
      right: "12",
      bottom: areaName.value.length > 4 ? "24" : "12",
      containLabel: true,
    },
    tooltip: {
      show: "true",
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "none", // 默认为直线，可选为：'line' | 'shadow'
      },
      transitionDuration: 0,
      borderRadius: 8,
      borderWidth: 0,
      padding: [5, 10],
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    xAxis: {
      // type: "category",
      // type: "value",
      axisTick: {
        show: false,
      },
      //   max: maxCourseCnt,
      axisLine: {
        show: true,
        lineStyle: {
          color: "white",
        },
      },
      axisLabel: {
        show: true,
        fontSize: "10",
        interval: 0,
        // 关键：添加换行格式化函数
        formatter: function(value) {
          if (value.length <= 5) {
            return value; // 5个字以内不换行
          }
          // 每5个字符插入换行符
          const regex = new RegExp(`(.{1,5})`, 'g');
          return value.replace(regex, '$1\n').trim();
        },
        // fontWeight: 800,
      },
      splitLine: {
        show: false,
      },
      data: areaName.value,
    },
    legend:{
      show: true,
      textStyle: {
        color: 'white'
      }
    },
    yAxis: [
      {
        // inverse: true,
        // type: "category",
        name: "条",
        // type: "value",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "white",
          },
        },
        axisLabel: {
          fontSize: "10",
          fontFamily: "PingFangMedium",
        },
      },
    ],
    // dataZoom: [
    //   {
    //     type: "slider",
    //     yAxisIndex: [0, 1],
    //     zoomLock: true,
    //     width: 7,
    //     right: 12,
    //     borderWidth: 0,
    //     borderColor: "transparent",
    //     backgroundColor: "rgba(4,42,102,0.7)",
    //     fillerColor: "white",
    //     borderRadius: 10,
    //     handleSize: 0,
    //     showDetail: false,
    //     start: 0,
    //     end: 45,
    //     brushSelect: false,
    //     filterMode: "filter",
    //     showDataShadow: false,
    //     realtime: true,
    //     // height: "100%",
    //     // top: "20%",
    //     textStyle: {
    //       color: "transparent",
    //     },
    //   },
    // ],
    dataZoom: [
      {
        show: areaName.value.length > 4,
        type: "slider",
        // xAxisIndex: 0,
        // zoomLock: true,
        height: 7,
        bottom: 12,
        start: 0,
        end: areaName.value.length > 4 ? ((4 / areaName.value.length) * 100) : 100,
        realtime: true,
      },
    ],
    series: [
      {
        name: "流程中",
        type: "bar",
        yAxisIndex: 0,
        barWidth: "24",
        label: {
          normal: {
            show: true,
            position: "top",
            color: "white",
            fontSize: "9",
          },
        },
        itemStyle: {
          normal: {
            show: true,
            color: '#02a7f0',
          },
        },
        barGap: "0%",
        data: xArr1.value,
      },
      {
        name: "整改中",
        type: "bar",
        yAxisIndex: 0,
        barWidth: "24",
        label: {
          normal: {
            show: true,
            position: "top",
            color: "white",
            fontSize: "9",
          },
        },
        itemStyle: {
          normal: {
            show: true,
            color: '#70e17b',
          },
        },
        data: xArr2.value,
      },
      {
        name: "已整改",
        type: "bar",
        yAxisIndex: 0,
        barWidth: "24",
        label: {
          normal: {
            show: true,
            position: "top",
            color: "white",
            fontSize: "9",
            // distance: 6,
          },
        },
        itemStyle: {
          normal: {
            show: true,
            // color: (item: any) => {
            //   if (item.dataIndex % 2 === 0) {
            //     return "#02a7f0";
            //   }
            //   return "#70e17b";
            // },
            color: '#80ffff',
            // barBorderRadius: 50,
          },
        },
        // barGap: "0%",
        // barCategoryGap: "0",
        // barCategoryGap: "20%",
        data: xArr3.value,
      },
    ],
  };
};
</script>

<template>
  <v-chart class="chart" :option="option" />
</template>

<style scoped lang="scss"></style>
